<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { AssetsItem, PanLayout, usePanState } from "./provider";
import PanFileBodyGridItem from "./PanFileBodyGridItem.vue";

const state = usePanState();
const { currentAsset, layout } = state;

const loading = ref(false);

const disabled = computed(() => {
  return loading.value || state.noMore;
});
const onItemClick = (item: AssetsItem) => {
  if (item.isDir()) {
    state.selectAsset(item);
    state.reloadAssets();
  }
};

const loadMore = () => {
  if (loading.value) return;
  loading.value = true;
  state.loadMoreAssets().then(() => {
    loading.value = false;
  });
};

const coverLayout = computed(() => {
  switch (layout.value) {
    case PanLayout.Grid:
      return "pan-container-grid";
    default:
      return "pan-container-list";
  }
});

onMounted(() => {
  loadMore();
});
</script>

<template>
  <ul
    :key="currentAsset.getKey()"
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="disabled"
    :class="coverLayout"
  >
    <PanFileBodyGridItem
      v-for="item in currentAsset.children"
      :key="item.getKey()"
      :asset="item"
      :layout="layout"
      @click="onItemClick"
    >
      {{ item.getTitle() }}
    </PanFileBodyGridItem>
  </ul>
</template>
<style lang="scss" scoped>
.pan-container-grid {
  // height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pan-container-list {
  // height: 100%;
}
</style>
